<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>参考链接：https://codepen.io/Nvagelis/pen/yaQGrL</title>
	</head>
	<style>
		html {
			box-sizing: border-box;
		}

		*,
		*:before,
		*:after {
			box-sizing: inherit;
			margin: 0;
			padding: 0;
		}

		html,
		body,
		canvas {
			width: 100%;
			height: 100%;
		}

		body {
			width: 100%;
			height: 100%;
			background-color: #222;
			background-image: url("https://drive.google.com/uc?export=view&id=0BzFF7FmbJUo5X0NEUXFVd0NBcWc");
			background-size: cover;
			background-position: 0 0;
			background-repeat: no-repeat;
			position: relative;
			z-index: 0;
		}

		body:after {
			content: "";
			width: 100%;
			height: 100%;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.1);
			z-index: 1;
			-webkit-animation: thunder-bg 6s infinite;
			animation: thunder-bg 6s infinite;
		}

		canvas {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
		}

		#canvas3 {
			z-index: 5;
		}

		#canvas2 {
			z-index: 10;
		}

		#canvas1 {
			z-index: 100;
		}

		@-webkit-keyframes thunder-bg {
			0% {
				background-color: rgba(34, 34, 34, 0.9);
			}

			9% {
				background-color: rgba(34, 34, 34, 0.9);
			}

			10% {
				background-color: rgba(59, 59, 59, 0.3);
			}

			10.5% {
				background-color: rgba(34, 34, 34, 0.9);
			}

			80% {
				background-color: rgba(34, 34, 34, 0.9);
			}

			82% {
				background-color: rgba(59, 59, 59, 0.3);
			}

			83% {
				background-color: rgba(34, 34, 34, 0.9);
			}

			83.5% {
				background-color: rgba(59, 59, 59, 0.3);
			}

			100% {
				background-color: rgba(34, 34, 34, 0.9);
			}
		}
	</style>
	<body class="thunder">
		<canvas id="canvas1"></canvas>
		<canvas id="canvas2"></canvas>
		<canvas id="canvas3"></canvas>
	</body>
	<script>
		var canvas1 = document.getElementById('canvas1');
		var canvas2 = document.getElementById('canvas2');
		var canvas3 = document.getElementById('canvas3');
		var ctx1 = canvas1.getContext('2d');
		var ctx2 = canvas2.getContext('2d');
		var ctx3 = canvas3.getContext('2d');

		var rainthroughnum = 500;
		var speedRainTrough = 25;
		var RainTrough = [];

		var rainnum = 500;
		var rain = [];

		var lightning = [];
		var lightTimeCurrent = 0;
		var lightTimeTotal = 0;

		var w = canvas1.width = canvas2.width = canvas3.width = window.innerWidth;
		var h = canvas1.height = canvas2.height = canvas3.height = window.innerHeight;
		window.addEventListener('resize', function() {
			w = canvas1.width = canvas2.width = canvas3.width = window.innerWidth;
			h = canvas1.height = canvas2.height = canvas3.height = window.innerHeight;
		});

		function random(min, max) {
			return Math.random() * (max - min + 1) + min;
		}

		function clearcanvas1() {
			ctx1.clearRect(0, 0, w, h);
		}

		function clearcanvas2() {
			ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
		}

		function clearCanvas3() {
			ctx3.globalCompositeOperation = 'destination-out';
			ctx3.fillStyle = 'rgba(0,0,0,' + random(1, 30) / 100 + ')';
			ctx3.fillRect(0, 0, w, h);
			ctx3.globalCompositeOperation = 'source-over';
		};

		function createRainTrough() {
			for (var i = 0; i < rainthroughnum; i++) {
				RainTrough[i] = {
					x: random(0, w),
					y: random(0, h),
					length: Math.floor(random(1, 830)),
					opacity: Math.random() * 0.2,
					xs: random(-2, 2),
					ys: random(10, 20)
				};
			}
		}

		function createRain() {
			for (var i = 0; i < rainnum; i++) {
				rain[i] = {
					x: Math.random() * w,
					y: Math.random() * h,
					l: Math.random() * 1,
					xs: -4 + Math.random() * 4 + 2,
					ys: Math.random() * 10 + 10
				};
			}
		}

		function createLightning() {
			var x = random(100, w - 100);
			var y = random(0, h / 4);

			var createCount = random(1, 3);
			for (var i = 0; i < createCount; i++) {
				single = {
					x: x,
					y: y,
					xRange: random(5, 30),
					yRange: random(10, 25),
					path: [{
						x: x,
						y: y
					}],
					pathLimit: random(40, 55)
				};
				lightning.push(single);
			}
		};

		function drawRainTrough(i) {
			ctx1.beginPath();
			var grd = ctx1.createLinearGradient(0, RainTrough[i].y, 0, RainTrough[i].y + RainTrough[i].length);
			grd.addColorStop(0, "rgba(255,255,255,0)");
			grd.addColorStop(1, "rgba(255,255,255," + RainTrough[i].opacity + ")");

			ctx1.fillStyle = grd;
			ctx1.fillRect(RainTrough[i].x, RainTrough[i].y, 1, RainTrough[i].length);
			ctx1.fill();
		}

		function drawRain(i) {
			ctx2.beginPath();
			ctx2.moveTo(rain[i].x, rain[i].y);
			ctx2.lineTo(rain[i].x + rain[i].l * rain[i].xs, rain[i].y + rain[i].l * rain[i].ys);
			ctx2.strokeStyle = 'rgba(174,194,224,0.5)';
			ctx2.lineWidth = 1;
			ctx2.lineCap = 'round';
			ctx2.stroke();
		}

		function drawLightning() {
			for (var i = 0; i < lightning.length; i++) {
				var light = lightning[i];

				light.path.push({
					x: light.path[light.path.length - 1].x + (random(0, light.xRange) - (light.xRange / 2)),
					y: light.path[light.path.length - 1].y + (random(0, light.yRange))
				});

				if (light.path.length > light.pathLimit) {
					lightning.splice(i, 1);
				}

				ctx3.strokeStyle = 'rgba(255, 255, 255, .1)';
				ctx3.lineWidth = 3;
				if (random(0, 15) === 0) {
					ctx3.lineWidth = 6;
				}
				if (random(0, 30) === 0) {
					ctx3.lineWidth = 8;
				}

				ctx3.beginPath();
				ctx3.moveTo(light.x, light.y);
				for (var pc = 0; pc < light.path.length; pc++) {
					ctx3.lineTo(light.path[pc].x, light.path[pc].y);
				}
				if (Math.floor(random(0, 30)) === 1) { //to fos apo piso
					ctx3.fillStyle = 'rgba(255, 255, 255, ' + random(1, 3) / 100 + ')';
					ctx3.fillRect(0, 0, w, h);
				}
				ctx3.lineJoin = 'miter';
				ctx3.stroke();
			}
		};

		function animateRainTrough() {
			clearcanvas1();
			for (var i = 0; i < rainthroughnum; i++) {
				if (RainTrough[i].y >= h) {
					RainTrough[i].y = h - RainTrough[i].y - RainTrough[i].length * 5;
				} else {
					RainTrough[i].y += speedRainTrough;
				}
				drawRainTrough(i);
			}
		}

		function animateRain() {
			clearcanvas2();
			for (var i = 0; i < rainnum; i++) {
				rain[i].x += rain[i].xs;
				rain[i].y += rain[i].ys;
				if (rain[i].x > w || rain[i].y > h) {
					rain[i].x = Math.random() * w;
					rain[i].y = -20;
				}
				drawRain(i);
			}
		}

		function animateLightning() {
			clearCanvas3();
			lightTimeCurrent++;
			if (lightTimeCurrent >= lightTimeTotal) {
				createLightning();
				lightTimeCurrent = 0;
				lightTimeTotal = 200; //rand(100, 200)
			}
			drawLightning();
		}

		function init() {
			createRainTrough();
			createRain();
			window.addEventListener('resize', createRainTrough);
		}
		init();

		function animloop() {
			animateRainTrough();
			animateRain();
			animateLightning();
			requestAnimationFrame(animloop);
		}
		animloop();
	</script>
</html>
